<at-dialog title="vm.title" on-close="vm.onClose" ng-show="vm.isReady">
    <at-tab-group>
        <at-tab
            state="vm.tabs.credential"
            ng-click="vm.onTabSelect('credential');"
        >
            {{::vm.strings.get('inputSources.CREDENTIAL')}}
        </at-tab>
        <at-tab
            state="vm.tabs.metadata"
            ng-click="vm.onTabSelect('metadata');"
        >
            {{::vm.strings.get('inputSources.METADATA')}}
        </at-tab>
    </at-tab-group>
    <div class="InputSourceLookup-selectedItem" ng-show="vm.tabs.credential._active">
        <div class="InputSourceLookup-selectedItemLabel">
            {{::vm.strings.get('inputSources.SELECTED')}}
        </div>
        <span>
            <div class="at-InputTagContainer">
                <at-tag
                    ng-show="vm.selectedName"
                    tag="vm.selectedName"
                    icon="external"
                />
            </div>
            <div
                class="InputSourceLookup-selectedItemText"
                ng-show="!vm.selectedName"
            >
                {{::vm.strings.get('inputSources.NONE_SELECTED')}}
            </div>
        </span>
    </div>
    <at-lookup-list
        ng-show="vm.tabs.credential._active"
        resource-name="credential"
        base-params="{
            order_by: 'name',
            credential_type__kind: 'external',
            page_size: 5
        }"
        results-filter="vm.resultsFilter"
        selected-id="vm.selectedId"
        on-ready="vm.onReady"
        on-item-select="vm.onItemSelect"
    />
    <at-form state="vm.form" autocomplete="off" id="input_source_form">
        <at-input-group
            ng-if="vm.tabs.metadata._active"
            col="12" tab="20"
            state="vm.form.inputs"
            form-id="input_source">
        </at-input-group>
        <at-action-group col="12" pos="right">
            <at-action-button
                variant="secondary"
                ng-click="vm.onTest()"
                ng-disabled="!vm.form.isValid || vm.form.disabled"
                ng-show="vm.tabs.metadata._active"
            >
                {{::vm.strings.get('TEST')}}
            </at-action-button>
            <at-action-button
                variant="tertiary"
                ng-click="vm.onClose()"
            >
                {{::vm.strings.get('CANCEL')}}
            </at-action-button>
            <at-action-button
                variant="primary"
                ng-click="vm.onNext()"
                ng-disabled="!vm.selectedId"
                ng-show="vm.tabs.credential._active"
            >
                {{::vm.strings.get('NEXT')}}
            </at-action-button>
            <at-action-button
                variant="primary"
                ng-click="vm.onSelect()"
                ng-disabled="!vm.form.isValid || vm.form.disabled"
                ng-show="vm.tabs.metadata._active"
            >
                {{::vm.strings.get('OK')}}
            </at-action-button>
        </at-action-group>
    </at-form>
</at-dialog>
